<template>
    <div>
        <div class="flexSB colorFFF" style="width: 400px;background-color: #151225;text-align: center;padding: 3px;border-radius: 50px;border:1px solid #24203C">
            <div :class="{ selectType: selectType == index }" :key="index" @click="chooseStatus(index)" class="color-fff hand" style="width: 100px; padding: 8px" v-for="(item, index) in typeList">
                <span>{{ item.title }}</span>
            </div>
        </div>
        <div element-loading-background="transparent" element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中" v-loading="loading">
            <div @scroll="loadMoreData" class="scroll-window" v-if="data.length>0">
                <div :key="index" class="mt-20 padding20 back151225 positionR" v-for="(item,index) in data"   :style="type == 'edit' ? 'padding-left: 40px;' : ''">
                    <div v-if="type == 'edit'" style="position: absolute;left: 10px;top: 120px;">
                        <div class="notSelect hand" v-if="!item.select" @click="selectFun(item)"></div>
                        <div class="select positionR hand" v-else @click="selectFun(item)">
                            <i class="el-icon-check size12"
                                style="position: absolute;left: 3px;top: 5px;font-weight: bold;color: #fff;"></i>
                        </div>
                    </div>
                    <el-row>
                        <el-col :span="6">
                            <div class="flex align-center colorFFF size14" style="width: 150px;">
                                <img alt src="@/assets/goods/one_by_one.png" srcset width="20px" />
                                <span class="pl-4">1V1密聊</span>
                            </div>
                        </el-col>
                        <el-col :span="7">
                            <div class="colorFFF size13">
                                <span class="vertical-middle">订单编号：{{item.trade_no}}</span>
                                <i @click="copy(item.trade_no)" class="iconfont icon-fuzhi vertical-middle cursor-pointer color-blue" style="font-size:20px"></i>
                            </div>
                        </el-col>
                        <el-col :span="7">
                            <div class="colorFFF size13">下单时间：{{item.created_at}}</div>
                        </el-col>
                        <el-col :span="4">
                            <div class="colorFFF size13 sizeCenter" v-if="item.status==1">待确认</div>
                            <div class="colorFFF size13 sizeCenter" v-if="item.status==2">已拒绝</div>
                            <div class="colorFFF size13 sizeCenter" v-if="item.status==3">进行中</div>
                            <div class="colorFFF size13 sizeCenter" v-if="item.status==4">已完成</div>
                            <div class="colorFFF size13 sizeCenter" v-if="item.status==5">已取消</div>
                        </el-col>
                    </el-row>

                    <div class="box marginTop20 back272337" style="padding: 10px;">
                        <div class="omit1 size14 pb-10 colorFFF" v-if="item.secret.desc">{{item.secret.desc}}</div>
                        <el-row :gutter="5">
                            <el-col :key="key" :span="2.5" v-for="(value,key) in item.secret.images">
                                <el-image :preview-src-list="item.secret.images" :src="value" class="radius10" fit="cover" style="width: 80px; height: 80px"></el-image>
                            </el-col>
                        </el-row>
                    </div>

                    <el-row class="marginTop20">
                        <el-col :span="13">
                            <div class="colorFFF size14" style="width: 330px;">
                                <i class="el-icon-time font-15 color999"></i>
                                <span class="pl-4">服务时间：{{item.start_time | getMdHis}} - {{item.end_time | getMdHis}}</span>
                            </div>
                        </el-col>

                        <el-col :span="7">
                            <div class="flexSB colorFFF size14" style="width: 160px;">
                                <div>
                                    服务价格：
                                    <span class="colorFF8F3E">{{item.money}}{{$store.state.config.coin_name}}</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="flexFS colorFFF size14" style="width: 100%;margin-top: -5px;">
                                <el-avatar :src="item.author.avatar" size="small"></el-avatar>
                                <div style="margin-left: 7px;">{{item.author.name}}</div>
                            </div>
                        </el-col>
                    </el-row>

                    <!-- <el-row class="marginTop10" v-if="item.secret.province">
                        <el-col :span="8.5">
                            <div class="flexSB colorFFF size14">
                                <i class="el-icon-location-outline size20 color999"></i>
                                <span>服务地址：{{item.secret.province}}{{item.secret.city}}{{item.secret.area}}</span>
                            </div>
                        </el-col>
                    </el-row> -->
                </div>
                <div class="text-center font-15 color-999 mt-10" v-if="append_loading">加载中...</div>
                <div class="text-center font-15 color-999 mt-10" v-if="data.length>=total">~没有更多了~</div>
            </div>
            <div v-else>
                <el-empty :image="empty_image"></el-empty>
            </div>
        </div>
    </div>
</template>

<script>
import pageTool from '@/mixins/page'
export default {
    mixins: [pageTool],
    data() {
        return {
            typeList: [
                {
                    title: '全部',
                    type: null,
                },
                {
                    title: '待确认',
                    type: 1,
                },
                {
                    title: '进行中',
                    type: 3,
                },
                {
                    title: '已完成',
                    type: 4,
                },
                {
                    title: '已拒绝',
                    type: 2,
                },
                {
                    title: '已取消',
                    type: 5,
                },
            ],
            selectType: 0,
            type: 'views',
            deleteId:[],
            query: {
                status: null,
                type: 'one_by_one',
            },
            empty_image: require('@/assets/image/empty.png'),
        }
    },

    mounted() {
        this.beforeInit()
    },
    methods: {
        chooseStatus(index) {
            this.page = 1
            this.selectType = index
            this.query.keyword = null
            this.query.status = this.typeList[this.selectType].type
            this.beforeInit()
        },
        beforeInit() {
            this.url = '/secret-take/index'
            this.append = true
            this.data = []
            this.init() //重新请求数据
        },
        copy(text) {
            const inputElement = document.createElement('input')
            inputElement.value = text
            document.body.appendChild(inputElement)
            inputElement.select()
            document.execCommand('copy')
            document.body.removeChild(inputElement)
            this.$message.success('复制成功')
        },
        loadMoreData(e) {
            if (e.srcElement.scrollTop + e.srcElement.clientHeight == e.srcElement.scrollHeight) {
                this.page++
                this.init()
            }
        },

        selectFun(item) {
            console.log(item)
            //判断是否有select属性
            if (item.hasOwnProperty('select') && item.select) {
                this.$set(item, 'select', false)
            } else {
                this.$set(item, 'select', true)
            }

            if (this.deleteId.includes(item.order_id)) { //存在就删除
                console.log(`${item.order_id} 存在于数组中`);
                this.deleteId.splice(this.deleteId.indexOf(item.order_id), 1);
                console.log(' this.deleteId', this.deleteId)
            } else {
                console.log(`${item.order_id} 不存在于数组中`);//不存在就添加
                this.deleteId.push(item.order_id)
                console.log(' this.deleteId', this.deleteId)
            }
        },

        allSelect() {
            console.log('全选')
            this.data = this.data.map(item => ({ ...item, select: true }));
            this.deleteId = this.data.map(item => item.order_id);
            console.log(this.deleteId)
            console.log('this.data', this.data)
        },

        cancelAllSelect() {
            console.log('取消全选')
            this.data = this.data.map(({ select, ...rest }) => rest);
            this.deleteId = []
        },
        deleteOrder() {
            if (this.deleteId.length == 0) {
                this.$message.warning('请选择内容');
                return
            }
            console.log('this.deleteId', this.deleteId)
            this.$request.del('/secret/order/delete_orders', { ids: this.deleteId }).then((res) => {
                try {

                    this.$message({
                        message: '删除成功',
                        type: 'success',
                        customClass: "messageClass"
                    })
                    console.log('messageClass')
                    //删除选中的id
                    this.data = this.data.filter(item => !this.deleteId.includes(item.order_id));
                } catch (err) {
                    console.log('err', err)
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.selectType {
    border-radius: 50px;
    background-color: #272337;
    // box-sizing: border-box;
}
.scroll-window {
    min-height: 450px;
    max-height: 530px;
    overflow-y: scroll;
}
.scroll-window::-webkit-scrollbar {
    display: none;
}
.notSelect {
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

.select {
    width: 20px;
    height: 20px;
    background-color: #FF1C6D;
    border-radius: 50%;
    text-align: center;
}
</style>